<template>
  <div class="dataCard-content" v-for="(item, index) in cardList" :key="index">
    <h2 class="card-name">{{ item.name }}</h2>
    <div class="en-name">{{ filterEnName(item.enName) }}</div>
    <div class="card-info flex justify-between items-center">
      <count-to :startVal="0" :endVal="item.number" :decimals="0" :duration="3000" class="card-count"
        :class="item.countClass"></count-to>
      <svg-icon class="card-icon" :icon-class="item.iconClass" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountTo } from 'vue3-count-to';
const filterEnName = (val: string) => {
  return val.toUpperCase();
};

const cardList = [
  {
    name: "成员总数",
    enName: "Total membership",
    number: 7125,
    iconClass: "card-list-1",
    countClass: "count1",
  },
  {
    name: "活动总数",
    enName: "Number of associations",
    number: 1125,
    iconClass: "card-list-2",
    countClass: "count2",
  },
  {
    name: "近期活跃人数",
    enName: "officials in active service",
    number: 175,
    iconClass: "card-list-3",
    countClass: "count3",
  },
];
</script>

<style scoped lang="scss">
.dataCard-content {
  max-width: 300px;
  width: 25%;
  height: 100%;
  max-height: 150px;
  background-color: #eee;
  padding: 15px;
  margin-right: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    transform: translateY(-5px);

    box-shadow: 0px 0.8px 2.2px rgba(0, 0, 0, 0.02),
      0px 1.9px 5.3px rgba(0, 0, 0, 0.028), 0px 3.5px 10px rgba(0, 0, 0, 0.035),
      0px 6.3px 17.9px rgba(0, 0, 0, 0.042),
      0px 11.7px 33.4px rgba(0, 0, 0, 0.05), 0px 28px 80px rgba(0, 0, 0, 0.07);

    .card-name {
      color: #ffff;
    }

    .en-name {
      color: #fff;
    }

    .card-count {
      color: white !important;
    }
  }

  &:hover::before {
    opacity: 1;
    visibility: visible;
  }

  &::before {
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    border-radius: 3px;
    z-index: -1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .card-name {
    color: rgb(35, 88, 69);
    font-size: 2.4rem;
  }

  .en-name {
    color: #ccc;
    padding: 10px 0;
  }

  .card-info {
    height: 50px;

    .card-count {
      font-size: 4.8rem;
      font-weight: 700;
    }

    .count1 {
      color: #2b5deb;
    }

    .count2 {
      color: #00bab5;
    }

    .count3 {
      color: #885aef;
    }

    .count4 {
      color: #e19904;
    }

    .count5 {
      color: #ef6666;
    }

    .card-icon {
      width: 40px !important;
      height: 40px !important;
    }
  }
}</style>
